<script setup>
import {
  PlusOutlined,
  DeleteOutlined,
  DownloadOutlined,
  ReloadOutlined,
  SearchOutlined,
  ToTopOutlined,
  InboxOutlined
} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import axios from "axios";

defineOptions({name: 'Operate'});
const url = import.meta.env.VITE_API_BASE_URL;
const emit = defineEmits(["onHandleCreate", "onHandleDelete", "onHandleDerive", "onHandleSearch",
  "onHandleRefresh", "onHandleExport"]);
const props = defineProps({
  file: {
    type: String,
    default: "",
  },
  deleteAllList: {
    type: Array,
    default: [],
  },
  deleteAllFun: {
    type: Function,
    default: () => ({}),
  },
  exportFun: {
    type: Function,
    default: () => ({}),
  },
});
const pageData = ref({
  exportVisible: false,
  file: "",
  fileList: [],
  message: "",
});
const method = reactive({
  create: () => {
    emit("onHandleCreate", true);
  },
  delete: () => {
    // 批量删除
    props.deleteAllFun(props.deleteAllList).then((res) => {
      if (res.code === 200) {
        message.success(res.message);
        emit("onHandleDelete", true);
      } else {
        message.error(res.message);
      }
    });
  },
  derive: () => {
    emit("onHandleDerive");
  },
  search: () => {
    emit("onHandleSearch");
  },
  refresh: () => {
    emit("onHandleRefresh");
  },
  export: () => {
    pageData.value.exportVisible = true;
  },
  exportChange: (file) => {
    pageData.value.file = file.file.originFileObj;
  },
  exportOk: () => {
    let formData = new FormData();
    formData.append("file", pageData.value.file);
    // 导入
    props.exportFun(formData).then(res => {
      if (res.code === 200) {
        message.success(res.message);
        emit("onHandleExport", true);
      } else {
        message.error(res.message);
        emit("onHandleExport", false);
      }
      pageData.value.message = res.message;
    });
  },
  downFile: () => {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url: url + '/static/templates/' + props.file,
        responseType: 'blob'
      }).then(res => {
        let blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel'
        });
        // 解码
        let fileName = decodeURIComponent(props.file);
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          //释放内存
          window.URL.revokeObjectURL(link.href)
        }
      });
    });
  },
  closeExport: () => {
    pageData.value.file = "";
    pageData.value.fileList = [];
    pageData.value.message = "";
    pageData.value.exportVisible = false;
  },
});
</script>

<template>
  <div id="operate">
    <div class="crud">
      <a-button class="btn" type="primary" @click="method.create">
        <template #icon>
          <PlusOutlined/>
        </template>
        <span>新增</span>
      </a-button>

      <a-button class="btn" type="primary" danger
                :disabled="props.deleteAllList.length === 0"
                @click="method.delete">
        <template #icon>
          <DeleteOutlined/>
        </template>
        <span>删除</span>
      </a-button>

      <a-button style="background-color: #a82626" class="btn" type="primary" danger @click="method.derive">
        <template #icon>
          <DownloadOutlined/>
        </template>
        <span>导出</span>
      </a-button>
    </div>
    <div class="control">
      <a-tooltip title="搜索">
        <a-button class="btn" @click="method.search">
          <template #icon>
            <SearchOutlined/>
          </template>
        </a-button>
      </a-tooltip>
      <a-tooltip title="刷新">
        <a-button class="btn" @click="method.refresh">
          <template #icon>
            <ReloadOutlined/>
          </template>
        </a-button>
      </a-tooltip>
      <a-tooltip title="导入">
        <a-button @click="method.export">
          <template #icon>
            <ToTopOutlined/>
          </template>
        </a-button>
      </a-tooltip>
    </div>
  </div>
  <!-- 导入 -->
  <a-drawer
      v-model:open="pageData.exportVisible"
      title="导入"
      width="600"
      @close="method.closeExport"
  >
    <a-alert type="info" show-icon>
      <template #message>
        <span>
          数据导入请严格按照模板填写，格式要求和新增一致！
        </span>
      </template>
      <template #action>
        <a-button type="primary" @click="method.downFile">
          下载模板
        </a-button>
      </template>
    </a-alert>
    <a-divider></a-divider>
    <div style="height: 200px">
      <a-upload-dragger name="file" :multiple="false" v-model:fileList="pageData.fileList"
                        action="/" @change="method.exportChange">
        <p class="ant-upload-drag-icon">
          <InboxOutlined/>
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
        <p class="ant-upload-hint">
          仅支持xls、xlsx格式
        </p>
      </a-upload-dragger>
    </div>
    <a-divider></a-divider>
    <a-textarea style="height: 300px" v-model:value="pageData.message"
                placeholder="导入信息" :rows="4"/>

    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px" @click="method.closeExport">取消导入</a-button>
        <a-button type="primary" @click="method.exportOk">确定导入</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<style scoped lang="less">
#operate {
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .crud {
    width: 50%;

    .btn {
      margin-right: 7px;
    }
  }

  .control {

    .btn {
      margin-right: 7px;
    }
  }
}
</style>